<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>query中ajax的全局事件和NProgress.html</title>
	<link rel="stylesheet" href="./css/nprogress.css">
</head>
<body>

	<!-- jquery中ajax的全局事件和NProgress.html：
		1、当页面中有ajax请求发送时触发的全局事件：ajaxStart事件；
		  当页面中有ajax请求完成时触发的全局事件：ajaxComplete事件
		2、纳米级进度条的NProgress插件 ：四个方法见文档

		

		 -->



	<!-- 布局 -->
	<button id="btn">发送请求</button>



	<!-- js代码部分 -->
	<script src="./js/jquery-3.4.1.min.js"></script>
	<script src="./js/nprogress.js"></script>
	<script type="text/javascript">

	
		$("#btn").on("click",function(){
		// 调用$.ajax()方法发送请求：
		$.ajax({
			type:"get",
			url:"http://localhost:3000/nprogress",
			success:function(response){
				console.log(response);

			},
		});

		// 当页面中有ajax请求发送时触发的全局事件（必须绑定document）
		$(document).on("ajaxStart",function(){
			NProgress.start();
		});
		// 当页面中有ajax请求完成时触发的全局事件
		$(document).on("ajaxComplete",function(){
			NProgress.done();
		});








		});




	
	</script>
	
	






</body>
</html>